<template>
	<view class="editUser-page">
		<ul v-if="user">
			<li>
				<div class="left">
					<span>姓名</span>
					<input type="text" v-model="user.nickname">
				</div>
				<image src="../../../static/image/arrow.png" mode=""></image>

			</li>
			<picker class="picker" :range="sexArray" @change="onChange">
				<li>
					<div class="left">
						<span>性别</span>
						<p>{{handleSex}}</p>
					</div>
					<image src="../../../static/image/arrow.png" mode=""></image>
				</li>
			</picker>
			<picker mode="date" :start="startDate" :end="endDate" @change="bindDateChange">
				<li>
					<div class="left">
						<span>参加工作时间</span>
						<input type="text" v-model="handleStartWork" disabled
							:placeholder="handleStartWork ? '' : '请选择工作时间'">
					</div>
					<image src="../../../static/image/arrow.png" mode=""></image>
				</li>
			</picker>
			<picker @change="bindPickerChange" mode="region" :range="array">
				<!-- <view class="uni-input">{{array[index]}}</view> -->
				<li>
					<div class="left">
						<span>当前城市</span>
						<input disabled type="text" v-model="handleProvince"
							:placeholder="handleProvince ? '' : '请选择当前城市'">
					</div>
					<image src="../../../static/image/arrow.png" mode=""></image>
				</li>
			</picker>

			<li @click="mobile_show = true">
				<div class="left">
					<span>手机号码</span>
					<input type="text" disabled v-model="user.mobile" :placeholder="user.mobile ? '' : '请输入手机号码'">
				</div>
				<image src="../../../static/image/arrow.png" mode=""></image>
			</li>
			<li>
				<div class="left">
					<span>邮箱</span>
					<input type="text" placeholder="请输入邮箱" v-model="user.email">
				</div>
				<image src="../../../static/image/arrow.png" mode=""></image>
			</li>
		</ul>
		<SSButton title="保存" @click="save" />


		<!-- 修改手机号 -->
		<div class="popup" v-if="mobile_show">
			<div class="popup-wrap">
				<div class="title">
					<span>手机号修改</span>
					<image @click="mobile_show = false" src="../../../static/image/close.png" mode=""></image>
				</div>
				<div class="mobile-wrap">
					<div class="mobile-input">
						<input type="text" v-model="newMobile" placeholder="请输入新手机号码"
							placeholder-class="mobile-input-ph">
					</div>
					<div class="mobile-input">
						<input type="text" v-model="code" placeholder="请输入验证码" placeholder-class="mobile-input-ph">
						<button @click="getCode">{{codeText}}</button>
					</div>
				</div>
				<div class="btns">
					<button @click="mobile_show = false">取消</button>
					<button @click="submitEditMobile">确定</button>
				</div>
			</div>

		</div>
	</view>
</template>

<script>
	import SSButton from '@/components/Button.vue'
	import {
		validPhone
	} from '@/utils/index.js'
	export default {
		components: {
			SSButton
		},
		data() {
			return {
				user: null,
				sexArray: ['男', '女'], // 性别
				date: '', // 日期
				area: null, // 城市

				mobile_show: false, // 手机号弹窗显示
				newMobile: null, // 新手机号
				code: null, // 验证码
				codeText: '获取验证码'
			};
		},
		computed: {
			// 性别
			handleSex() {
				let sexs = ['未知', '男', '女']
				return sexs[this.user && this.user.sex]
			},
			// 参加工作时间
			handleStartWork() {
				let time = this.user ? this.user.start_work : ''
				console.log(time)
				if (!time) return ''
				if (!isNaN(Number(time))) {
					let date = new Date(Number(time + '000'))
					return date.getFullYear() + '-' + ((date.getMonth() + 1) < 10 ? `0${date.getMonth() + 1}` : date
						.getMonth() + 1) + '-' + ((date.getDate()) < 10 ? `0${date.getDate()}` : date
						.getDate())
				} else {
					return time
				}
			},
			// 城市
			handleProvince() {

				if (this.user) {
					return this.user.province ? `${this.user.province} ${this.user.city} ${this.user.district}` : ''
				} else {
					return ''
				}
			},

			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			const user = uni.getStorageSync('userInfo')
			this.user = user
		},
		methods: {
			// 性别选择
			onChange(e) {
				this.user.sex = Number(e.detail.value) + 1
			},
			// 日期选择
			bindDateChange(e) {
				let date = e.detail.value.split('-')
				console.log(date)
				this.user.start_work = `${date[0]}-${date[1]}-${date[2]}`

			},
			// 城市选择
			bindPickerChange(e) {
				this.area = e.detail
				this.user.province = e.detail.value[0]
				this.user.city = e.detail.value[1]
				this.user.district = e.detail.value[2]
				this.user.province_code = e.detail.code[0]
				this.user.city_code = e.detail.code[1]
				this.user.district_code = e.detail.code[2]

			},
			// 提交保存
			async save() {
				if (this.user.sex == 0) {
					return uni.showToast({
						title: '请选择性别',
						icon: 'none'
					})
				}
				if (!this.handleStartWork) {
					return uni.showToast({
						title: '请选择参加工作时间',
						icon: 'none'
					})
				} 
				if (!this.user.province_code || this.area && !this.area.code[0]) {
					return uni.showToast({
						title: '请选择当前城市',
						icon: 'none'
					})
				}
				if (!this.user.mobile) {
					return uni.showToast({
						title: '请绑定手机号码',
						icon: 'none'
					})
				}



				const {
					code,
					msg
				} = await this.$http.User.editUser({
					nickname: this.user.nickname,
					start_work: this.handleStartWork,
					sex: this.user.sex,
					mobile: this.user.mobile,
					email: this.user.email,
					province_code: this.user.province_code || this.area && this.area.code[0],
					city_code: this.user.city_code || this.area && this.area.code[1],
					district_code: this.user.district_code || this.area && this.area.code[2],
				})
				return uni.showToast({
					title: code == 200 ? '修改成功' : msg,
					icon: 'none'
				})
			},
			// 修改手机号
			async submitEditMobile() {

				if (!this.code) return uni.showToast({
					title: '请输入验证码',
					icon: 'none'
				})
				const {
					code,
					msg
				} = await this.$http.User.updateMobile({
					mobile: this.newMobile,
					code: this.code
				})
				uni.showToast({
					title: msg,
					icon: 'none'
				})
				if (code != 200) return false
				this.mobile_show = false
				this.user.mobile = this.newMobile
			},
			// 获取验证码
			async getCode() {
				console.log(this.newMobile)
				if (!validPhone(this.newMobile)) return uni.showToast({
					title: '请输入正确的手机号码',
					icon: 'none'
				})


				const {
					code,
					msg
				} = await this.$http.User.sendMobile(this.newMobile)

				if (code != 200) return uni.showToast({
					title: msg,
					icon: 'none'
				})
				if (this.codeText.length >= 4) {
					// 开启倒计时
					let codeTime = 60
					let timer = setInterval(() => {
						if (codeTime <= 0) {
							this.codeText = '重新获取'
							clearInterval(timer)
							return false
						}
						codeTime -= 1
						this.codeText = `${codeTime}s`
						console.log(this.codeText)
					}, 1000)







				}

			},



			// 格式化日期
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}`;
			}
		}
	}
</script>

<style lang="less" scoped>
	.editUser-page {
		ul {
			background: #fff;
			box-shadow: 0px 0px 10px 2px rgba(241, 241, 241, 1);
			border-radius: 8upx;
			margin: 0 32upx;
			margin-top: 10upx;
			margin-bottom: 32upx;

			li {
				margin: 0 32upx;
				border-bottom: 1px solid #EEEEEE;
				display: flex;
				align-items: center;
				padding: 32upx 0;


				&:last-of-type {
					border-bottom: unset;
				}

				.left {
					flex: 1;
					display: flex;
					flex-direction: column;

					span {
						color: #666E7A;
						font-size: 24upx;
						line-height: 24upx;
						font-weight: 400;
					}

					input,
					p {
						color: #28211F;
						font-size: 24upx;
						line-height: 24upx;
						font-weight: 500;
						margin-top: 20upx;
						min-height: 24upx;
					}
				}

				image {
					width: 36upx;
					height: 36upx;
				}

			}
		}

		.popup {
			position: fixed;
			top: 0%;
			left: 0%;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, .5);
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 999;

			.popup-wrap {
				background: #fff;
				width: 570upx;
				height: 412upx;

			}

			.title {
				display: flex;
				align-items: center;
				padding: 0 32upx;
				height: 96upx;
				border-bottom: 1px solid #EEEEEE;

				span {
					flex: 1;
					color: #28211F;
					font-size: 28upx;
					font-weight: 400;
					line-height: 28upx;
				}

				image {
					width: 32upx;
					height: 32upx;
				}
			}

			.mobile-wrap {
				padding: 0 32upx;

				.mobile-input-ph {
					color: #999999;
				}

				.mobile-input {
					padding-top: 32upx;
					padding-bottom: 20upx;
					border-bottom: 1px solid #EEEEEE;
					display: flex;
					align-items: center;

					input {
						color: #333;
						font-size: 24upx;
						font-weight: 400;
						flex: 1;
					}

					button {
						height: 56upx;
						line-height: 56upx;
						background: #2AABE2;
						color: #fff;
						font-size: 24upx;
						font-weight: 500;
						padding: 0 10upx;
					}
				}
			}

			.btns {
				display: flex;
				align-items: flex-end;
				justify-content: flex-end;
				padding-top: 32upx;

				button {
					margin: 0;
					width: 120upx;
					height: 56upx;
					line-height: 56upx;
					background: #fff;
					border: 1px solid #999999;
					color: #999999;
					font-size: 24upx;
					margin-right: 32upx;
					border-radius: 8upx;

					&:last-of-type {
						background: #2AABE2;
						color: #fff;
						border: 1px solid #2AABE2;

						&::after {
							border: 1px solid #2AABE2;
						}
					}
				}
			}
		}
	}
</style>
